<template>
	<div class="lc_wrap">
		<el-row class="abnormalconfig">
			<el-col :span="leftWidth">
				<div class="box treeBox">
					<basic-container>
						<lcTree deviceType="2" @ready="ready"></lcTree>
					</basic-container>
				</div>
			</el-col>
			<el-col :span="rightWidth" class="table-wrapper">
				<overlay @changeTreeBox="changeTreeBox"></overlay>
				<basic-container>
					<!--时间选择-->
					<el-form :inline="true" class="demo-form-inline" size="small">
						<el-form-item label="">
							<!--<el-date-picker v-model="start" type="date" size="small" placeholder="开始日期" 
								:picker-options="pickerOption" value-format="yyyy-MM-dd"></el-date-picker>-->
							<el-date-picker v-model="rangeTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<!--搜索按钮-->
						<el-form-item label="">
							<el-button type="primary" size="small" icon="el-icon-search" @click="search">搜 索</el-button>
						</el-form-item>
					</el-form>
					<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" @refresh-change="onLoad">
						<template slot="menuLeft">
							<el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">操作</el-button>
						</template>
					</avue-crud>

					<el-dialog title="新增远程智控" :visible.sync="dialogVisiable" :append-to-body="true">
						<control ref="control" @finish="finishControl"></control>
					</el-dialog>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { getList } from "@/api/remotecontrol/remotecontrol";
	import mixmin from '@/config/mixmin'
	import lcTree from "@/components/common/tree.vue";
	import overlay from "@/components/common/overlay.vue";
	import control from "./control.vue";
	export default {
		components: {
			lcTree,
			overlay,
			control
		},
		data() {
			return {
				dialogVisiable: false,
				//  新增编辑绑定参数
				form: {},
				// 主表格加载等待参数
				loading: false,
				rangeTime: [],
				start: '', // 开始时间
				end: '', // 结束时间
				// 主表格参数
				option: {
					menu: false,
					addBtn: false,
					stripe: true, // 斑马纹
					tip: false,
					searchShow: true,
					searchMenuSpan: 6,
					border: true,
					index: false,
					viewBtn: false,
					dialogClickModal: false,
					labelWidth: 120,
					column: [{
							label: '站点名称',
							prop: 'siteName',
							display: false
						},
						{
							label: 'MN',
							prop: 'mn',
							display: false
						},
						{
							label: '操作类型',
							prop: 'cnName',
							display: false
						},
						{
							label: '参数',
							prop: 'controlLog',
							display: false
						},
						{
							label: '操作用户',
							prop: 'userName',
							display: false
						},
						{
							label: '操作时间',
							prop: 'createTime',
							display: false
						},
						{
							label: '操作结果',
							prop: 'message',
							display: false
						},
					]
				},
				pickerOption: {
					firstDayOfWeek: 1,
					disabledDate(time) {
						return time.getTime() > Date.now()
					},
				},
				// 主表格数据存储
				data: [],
				// 当前树选中ID
				currentId: null,
				// 当前树选中Key
				currentKey: null,
				// 当前树选中的层级
				currentNodeType: null,
				// 当前树选中的父级KEY 保存时用到
				parentKey: null,
			};
		},
		mixins: [mixmin],
		computed: {
			permissionList() {

			}
		},
		mounted() {

		},
		methods: {
			finishControl(){
				this.dialogVisiable = false
				this.onLoad()
			},
			add() {
				this.dialogVisiable = true
				let that = this
				setTimeout(function() {
					that.$refs.control.initData(that.currentId)
				}, 0)
			},
			search() {
				if(this.rangeTime && this.rangeTime.length > 0) {
					this.start = this.rangeTime[0]
					this.end = this.rangeTime[1]
				} else {
					this.start = ''
					this.end = ''
				}
				this.onLoad()
			},
			ready(data, treeData) {
				this.currentId = data.id
				this.currentKey = data.key
				this.currentNodeType = data.nodeType
				this.onLoad()
			},
			onLoad() {
				let params = {
					id: this.currentId,
					current: this.page.currentPage,
					size: this.page.pageSize,
					start: this.start,
					end: this.end
				}
				getList(params).then(res => {
					this.data = res.data.data.records
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		height: 100%;
	}
	
	.el-row {
		height: calc(100% - 20px);
	}
	
	.el-col {
		height: 100%;
		overflow: auto;
	}
</style>